<template>
  <section>
    <el-row id="listTop">
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="state.filters">
          <el-form-item>
            <el-input v-model="state.filters.userName" placeholder="姓名" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="state.listLoading"
              @click="handleCurrentChange(1)"
            ><el-icon> <Search /> </el-icon>查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="state.listLoading"
              @click="handleCreate()"
            ><el-icon> <Plus /> </el-icon>新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          v-model:current-page="state.page"
          v-model:page-size="state.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="state.listLoading"
          size="small"
          :data="state.items"
          border
          stripe
          @sort-change="handleOrderChange"
        >
          <el-table-column type="index" label="No." width="50">
            <template #default="scope">
              {{ indexMethod(scope.$index, state.page, state.pageSize) }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="姓名" sortable="custom" />
          <el-table-column prop="loginName" label="登录名" sortable="custom" />
          <el-table-column prop="email" label="电子邮件" sortable="custom" />
          <el-table-column prop="mobile" label="电话号码" sortable="custom" />
          <el-table-column prop="roleName" label="角色" sortable="custom" />
          <el-table-column label="是否激活" prop="isActive">
            <template #default="scope">
              <el-tag effect="dark" :type="statusMap[scope.row.isActive]">{{ scope.row.isActiveName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="管理员" prop="isAdmin">
            <template #default="scope">
              <el-tag effect="dark" :type="statusMap[scope.row.isAdmin]">{{ scope.row.isAdminName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <p>
                <el-button
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                ><el-icon> <Edit /> </el-icon>编辑</el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                ><el-icon> <Delete /> </el-icon>删除</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          v-model:current-page="state.page"
          v-model:page-size="state.pageSize"
          background
          layout="total, prev, pager, next, jumper"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog v-model="state.dbFormVisible" :title="state.dbFormTitle" :close-on-click-modal="false">
      <el-form ref="dbForm" :model="state.dbForm" label-width="120px" :rules="state.dbFormRules">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="state.dbForm.userName" auto-complete="off" />
        </el-form-item>
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="state.dbForm.loginName" auto-complete="off" />
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <el-input v-model="state.dbForm.email" auto-complete="off" />
        </el-form-item>
        <el-form-item label="电话号码" prop="mobile">
          <el-input v-model="state.dbForm.mobile" auto-complete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input
            v-model="state.dbForm.passwd"
            auto-complete="off"
            type="password"
            placeholder="新增时必须填写，更新信息时不更改请留空"
          />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="state.dbForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="role in state.menus.roles"
              :key="role.id"
              :label="role.roleName"
              :value="role.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否激活">
          <el-radio-group v-model="state.dbForm.isActive">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否管理员">
          <el-radio-group v-model="state.dbForm.isAdmin">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :disabled="state.dbLoading" @click="state.dbFormVisible = false">取消</el-button>
          <el-button type="primary" :loading="state.dbLoading" @click="dbSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>

<script setup>
import { lt } from 'lodash-es'
import api from '@/utils/api'
import { onMounted, reactive, ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  localGet,
  toolGetList,
  indexMethod,
  toolDbSubmit,
  toolDbSuccess,
  toolDelete,
  toolOrderChange,
  toolGetMenus,
  statusMap
} from '@/utils'
const apiDb = `/users`
const dbForm = ref(null)
const state = reactive({
  filters: {
    userName: ''
  },
  menus: {
    roles: []
  },
  items: [],
  total: 0,
  page: 1,
  pageSize: 20,
  order: '',
  sortby: '',
  listLoading: false,
  sels: [],
  dbFormVisible: false,
  dbLoading: false,
  dbFormTitle: '',
  dbFormSubmitTitle: '',
  dbMethod: '',
  dbFormRules: {
    userName: [{ required: true, message: '请输入名字', trigger: 'blur' }],
    loginName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
    email: [{ type: 'email', required: false, message: '请输入正确的电子邮件地址', trigger: 'blur' }]
  },
  // 编辑界面数据
  dbForm: {
    userId: 0,
    userName: '',
    loginName: '',
    email: '',
    mobile: '',
    passwd: '',
    roleId: null,
    isActive: 0,
    isAdmin: 0
  },
  remoteLoading: false
})
const userInfo = localGet('user')
const isSysAdmin = userInfo.isSysAdmin
onMounted(async() => {
  toolGetList(state, apiDb, state.filters)
  toolGetMenus(state, apiDb)
})
const handleOrderChange = async column => {
  toolOrderChange(state, apiDb, column)
}

const handleCurrentChange = async page => {
  state.page = page
  toolGetList(state, apiDb, state.filters)
}

const handleCreate = async query => {
  state.dbFormVisible = true
  state.dbFormTitle = '新增'
  state.dbFormSubmitTitle = '提交'
  state.dbMethod = 'create'
  state.dbForm = {
    userId: 0,
    userName: '',
    loginName: '',
    email: '',
    mobile: '',
    passwd: '',
    roleId: null,
    isActive: 0,
    isAdmin: 0
  }
}
const handleEdit = function(index, row) {
  state.dbFormVisible = true
  state.dbFormTitle = '编辑'
  state.dbFormSubmitTitle = '提交'
  state.dbMethod = 'update'
  row.passwd = ''
  if (!row.roleId) {
    row.roleId = null
  }
  state.dbForm = Object.assign({}, row)
}

const handleDelete = async(index, row) => {
  toolDelete(state, apiDb, row.userId)
}

const dbSubmit = async function() {
  toolDbSubmit(dbForm, state.dbForm.userId, state, apiDb, dbSuccess)
}
const dbSuccess = async function() {
  toolDbSuccess(state, apiDb)
}

</script>

<style scoped></style>
